<template>
    <div class="app-container">
        <!--  搜索栏  -->
        <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="60px">
            <el-form-item label="用户名" >
                <el-input v-model="queryParams.employeeName" placeholder="请输入用户名" clearable size="small"/>
            </el-form-item>
            <el-form-item label="工号">
                <el-input v-model="queryParams.employeeId" placeholder="请输入工号" clearable size="small"/>
            </el-form-item>
            <el-form-item style="margin-left: 10px;">
                <el-button type="primary" icon="el-icon-search" size="mini" @click="listEmployee" >搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" style="margin-left: 10px;" @click="resetQuery" >重置</el-button>
            </el-form-item>
        </el-form>
        <!-- 用户表格 -->
        <el-table max-height="360" :data="userList.slice((currentPage-1)*pageSize,currentPage*pageSize)">
            <el-table-column align="center" type="index" label="序号" width="50"></el-table-column>
            <el-table-column label="用户名" align="center" prop="employeeName"/>
            <el-table-column label="工号" align="center" prop="employeeId"/>
            <el-table-column label="操作" align="center" width="220" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-button type="text" size="mini" icon="el-icon-lock" :disabled="isUser(scope.row)" @click="activateSingleEmployee(scope.row)">激活</el-button>
              </template>
            </el-table-column>
        </el-table>
        <pagination v-show="userList.length>0"
                :total="userList.length"
                :page.sync="currentPage"
                :limit.sync="pageSize"
        />
    </div>
</template>

<script>
    import { getAllAccount, userFuzzyQueryAuth, saveAccount, delAccount } from '@/api/platform/account'
    import {resetPassword} from "@/api/user";
    import {getEmployee} from "@/api/basicdata/employee";
    export default {
        name: "userForm",
        props: {
            // 用户列表信息
            userList: Array,
            // 账号列表
            accountList: Array,
            // 账号
            userCode: String,
        },
        data() {
            return {
                // 按钮loading
                buttonLoading: false,
                // 查询参数
                queryParams: {
                    employeeName: undefined,
                    employeeId: undefined,
                },
                currentPage: 1,
                currentIndex: '',
                pageSize: 10,
            }
        },
        created() {
            // console.log("用户数据："+JSON.stringify(this.userList))
        },
        methods: {
            /** 获取用户列表 */
            listEmployee() {
                const searchParams = {
                    searchParams: this.queryParams
                }
                getEmployee(searchParams).then(res => {
                    if (res.retCode === '200') {
                        this.userList = res.responseBody
                    } else {
                        console.log(res)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            // 激活用户
            activateSingleEmployee(employee) {
                this.$confirm('确定激活此账户?', "警告", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(function() {
                    const data = {
                        userCode: employee.employeeId,
                        userName: employee.employeeName
                    }
                    return saveAccount(data);
                }).then(res => {
                    if (res.retCode === '200') {
                        this.$message.success('激活成功')
                        //刷新数据
                        this.$emit('refresh')
                    } else {
                        this.$message.error('激活失败')
                    }
                })
            },
            // 禁用已激活的用户操作
            isUser(employee) {
                const userCode = employee.employeeId
                const index = this.accountList.findIndex(item => item.userCode === userCode)
                return index !== -1
            },
            /** 重置按钮操作 */
            resetQuery() {
                this.resetForm("queryForm");
                this.queryParams = {};
                this.listEmployee();
            },
        }

    }

</script>
